<script setup>
import SelectedItem from './components/SelectIedtem.vue'
import QuestionItem from './components/QuestionItem.vue'
import JudgedItems from './components/JudgedItems.vue'
import MultipleSelectedItem from './components/MultipleSelectedItem.vue'

</script>

<template>

    <div class="common-layout">
        <!-- 标题 -->
        <el-header class="element-center">
            <h1>{{ title }}</h1>
        </el-header>

        <el-container>
            <!-- 侧边空白 -->
            <el-aside width="10%"></el-aside>
            <el-container style="border: 2px,gray,solid;">
                <el-main>
                    <div v-for="(item, index) in information" :key="index">
                        <!-- 测试使用 -->
                        <!-- <h1>{{ item }}</h1> -->
                        <div v-if="item.type === 'JudgedItems'">
                            <JudgedItems :information="item"></JudgedItems>

                        </div>
                        <div v-else-if="item.type === 'MultipleSelectedItem'">
                            <MultipleSelectedItem :information="item"></MultipleSelectedItem>
                        </div>
                        <div v-else-if="item.type === 'QuestionItem'">
                            <QuestionItem :information="item">
                            </QuestionItem>
                        </div>
                        <div v-else-if="item.type === 'SelectIedtem'">
                            <SelectedItem :information="item"></SelectedItem>
                        </div>
                        <div v-else>
                            ERROR
                        </div>
                    </div>
                    <br>
                    <hr><br>
                    <el-row class="element-center">
                        <el-button type="primary" round size="large">提交</el-button>
                    </el-row>
                    <br>
                </el-main>

            </el-container>
            <el-aside width="10%"></el-aside>

        </el-container>
    </div>


</template>

<script>
export default {
    setup() {

    },
    data() {
        return {
            id: '',
            title: '这是一个标题',
            information: [{
                id: 1,
                type: "JudgedItems",
                title: "判断题",
            }, {
                id: 2,
                type: "MultipleSelectedItem",
                title: "多选题",
                optionA: "A选项",
                optionB: "B选项",
                optionC: "C选项",
                optionD: "D选项",
            }, {
                id: 3,
                type: "QuestionItem",
                title: "问答题"
            }, {
                id: 4,
                type: "SelectIedtem",
                title: "单选题",
                optionA: "A选项",
                optionB: "B选项",
                optionC: "C选项",
                optionD: "D选项",
            }, {
                id: 5,
                type: "SelectIedtem",
                title: "单选题",
                optionA: "A选项",
                optionB: "B选项",
                optionC: "C选项",
                optionD: "D选项",
            },
            {
                id: 6,
                type: "SelectIedtem",
                title: "单选题",
                optionA: "A选项",
                optionB: "B选项",
                optionC: "C选项",
                optionD: "D选项",
            },
            ]
        }
    }, mounted() {
        console.log(this.$router.currentRoute.value.params.id);
        this.id = this.$router.currentRoute.value.params.id;
        this.$axios.post('/index.php/index/getSurveyById', { 'id': this.id })
            .then(response => {
                console.log("userwaitdata的请求状态：" + response.data.message);
                console.log("userwaitdata请求到的数据：");
                console.log(response.data.data);
                this.information = response.data.data.questions;
            })
            .catch(error => {
                // 处理错误
                console.error('There was an error!', error);
                this.Alert = 'Error: ' + error.message;
            });
    }
    ,
}
</script>

<style>
.element-center {
  display: flex;
  justify-content: center;
}
</style>